import React, { Component } from 'react';
import { findFilmsPage } from '@/api/MaiZuo';

import FilmItem from './FilmItem';
import FilmDetail from './FilmDetail';

import './css/index.css';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      list: [],
      film: {},
    };
    findFilmsPage().then((res) => {
      console.log(res);

      this.setState({
        list: res.films,
      });
    });
  }

  render() {
    return (
      <div className='app'>
        <div>
          {this.state.list.map((item) => {
            return (
              <FilmItem
                key={item.filmId}
                {...item}
                clickEvent={(value) => {
                  //   console.log(value)
                  this.setState({
                    film: value,
                  });
                }}></FilmItem>
            );
          })}
        </div>
        <div>
          <FilmDetail {...this.state.film}></FilmDetail>
        </div>
      </div>
    );
  }
}
